<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>坤腾-云平台</title>

    <!-- Bootstrap Core CSS -->
    <link href="${ctxStatic}/css/bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="${ctxStatic}/css/smartech.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="${ctxStatic}/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<style type="text/css">
    /*密码强度*/
    .pw-strength {clear: both;position: relative;top: 8px;width: 180px;}
    .pw-bar{background: url(${ctxStatic}/images/pwd-1.png) no-repeat;height: 14px;overflow: hidden;width: 179px;}
    .pw-bar-on{background:  url(${ctxStatic}/images/pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
    .pw-weak .pw-defule{ width:0px;}
    .pw-weak .pw-bar-on {width: 60px;}
    .pw-medium .pw-bar-on {width: 120px;}
    .pw-strong .pw-bar-on {width: 179px;}
    .pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
    .pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}
    .mgl5 {margin-left: 5px;}
    .form-horizontal .form-group {margin-left: 0; margin-right: 0;}
    .ii{   color: #F00; margin-right: 8px;font-family: "SimSun"; }
    .label_1{margin-top:4px !important;}
    .input-tip{ display:none; font-size: 12px; color: #989898; margin-top: 5px !important;}
</style>
    <style>
        body {
            background-color: #FFFFFF
        }
        .col-sm-2 {
            width: 16.66666667%;
        }
        .col-sm-3 {
            width: 25%;
        }
        .col-sm-8 {
            width: 66.66666667%;
        }
        .col-sm-10 {
            width: 83.33333333%;
        }
        .form-horizontal .control-label {
            padding-top: 7px;
            margin-bottom: 0;
            text-align: right;
        }
        .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
            float: left;
        }

    </style>

<body>
    <div class="form-horizontal" >
        <form id="changePwForm">
            <div class="modal-body">

                    <div class="form-group">
                        <label class="col-sm-3 control-label">原始密码：</label>
                        <div class="col-sm-8">
                            <input id="oldLoginName" type="password" class="form-control" name="oldLoginName" >
                            <span class="help text-danger"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">新密码：</label>
                        <div class="col-sm-8">
                            <%--<input id="newPassword" type="password" class="form-control" placeholder="" name="newPassword" onkeydown="return banInputSapce(event)">--%>
                            <input id="newPassword" type="password" class="form-control" placeholder="" name="newPassword" >
                            <span class="help text-danger"></span>
                        </div>

                    </div>
                    <%--<div class="form-group">--%>
                        <%--<label class="col-sm-3 control-label"></label>--%>
                        <%--<div class="col-sm-8">--%>
                            <%--<div id="level" class="pw-strength">--%>
                                <%--<div class="pw-bar"></div>--%>
                                <%--<div class="pw-bar-on"></div>--%>
                                <%--<div class="pw-txt">--%>
                                    <%--<span>弱</span>--%>
                                    <%--<span>中</span>--%>
                                    <%--<span>强</span>--%>
                                <%--</div>--%>
                            <%--</div>--%>
                        <%--</div>--%>
                    <%--</div>--%>
                    <div class="form-group">
                        <label class="col-sm-3 control-label">确认新密码：</label>
                        <div class="col-sm-8">
                            <input id="comfPassword" type="password" class="form-control" name="comfPassword" value="">
                            <span class="help text-danger"></span>
                        </div>
                    </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="submit" id="savepwd" class="btn btn-primary">确定</button>
            </div>
        </form>
    </div>

    </body>

<!-- jQuery Version 1.11.0 -->
<script src="${ctxStatic}/js/jquery-1.11.0.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="${ctxStatic}/js/bootstrap.min.js"></script>
<script src="${ctxStatic}/js/plugins/layer/layer.js"></script>
<!-- validate JavaScript -->
<script src="${ctxStatic}/js/plugins/validate/jquery.validate.min.js"></script>

<!-- 自定义 JavaScript -->
<script src="${ctxStatic}/js/modaljs.js"></script>

    <script>

        function banInputSapce(e)
        {
            var keynum;
            if(window.event) // IE
            {
                keynum = e.keyCode
            }
            else if(e.which) // Netscape/Firefox/Opera
            {
                keynum = e.which
            }
            if(keynum == 32){
                return false;
            }
            return true;
        }

        $(function(){

            $("#changePwForm").validate({
                rules : {
                    oldLoginName : {
                        required : true
                    },
                    newPassword : {
                        required : true,
                        minlength : 8,
                        maxlength : 20
                    },
                    comfPassword : {
                        required : true,
                        equalTo : "#newPassword"
                    }
                } ,
                messages : {
                    oldLoginName : {
                        required : "输入不能为空"
                    },
                    newPassword : {
                        required : "输入不能为空",
                        minlength : "新密码格式不正确,请输入8-20位任意字符组合",
                        maxlength : "新密码格式不正确,请输入8-20位任意字符组合"
                    },
                    comfPassword : {
                        required : "输入不能为空",
                        equalTo : "确认密码与新密码不一致"
                    }
                },
                errorPlacement : function(error, element) {
                    error.appendTo(element.siblings(".help"));
                },
                submitHandler : function(form){
                    //1. 取值
                    var oldPassword = $("#oldLoginName").val();
                    var newPassword = $("#newPassword").val();
                    var comfPassword = $("#comfPassword").val();

                    //3. 发请求
                    $.ajax({
                        url:"${ctx}/sys/user/modifyPwd",
                        type:"post",
                        dataType:"json",
                        data:{
                            oldPassword:oldPassword,
                            newPassword:newPassword
                        },
                        async:false,
                        success: function(data) {
                            if(data.code*1 == 200) {
                                layer.msg("修改成功！", {icon: 1});
                            }else{
                                layer.msg(data.message, {icon:2});
                            }
                        }
                    });

                }
            });

//            $("#savepwd").on("click",function(){
//
//
//                //2.  验证
//                if(newPassword != comfPassword){
//                    alert("2次输入的密码不一致");
//                    return
//                }
//
//
//
//            });


            $('#newPassword').keyup(function () {
                var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
                var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
                var enoughRegex = new RegExp("(?=.{6,}).*", "g");

                if (false == enoughRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-defule');
                    //密码小于六位的时候，密码强度图片都为灰色
                }
                else if (strongRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-strong');
                    //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强
                }
                else if (mediumRegex.test($(this).val())) {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass(' pw-medium');
                    //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
                }
                else {
                    $('#level').removeClass('pw-weak');
                    $('#level').removeClass('pw-medium');
                    $('#level').removeClass('pw-strong');
                    $('#level').addClass('pw-weak');
                    //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的
                }
                return true;
            });



        })
    </script>

</html>